<template>
  <div class="login">
    <div class="header">
      <p>Hi，您好~</p>
      <h2>欢迎来到易起行</h2>
      <div @click="$router.go(-1)" class="back">
        <img src="../assets/img/fanhui.png" alt="">
      </div>
    </div>
    <div class="main">
      <div class="item">
        <input type="text" placeholder="手机号/会员账号" v-model="phone" />
      </div>
      <div class="item">
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
      <div
        :class="['sub', this.phone && this.password ? 'con' : '']"
        @click="submit"
      >
        登录
      </div>
      <div class="tourist">
        <span>手机验证码登录</span>
        <span>忘记密码</span>
      </div>
      <div class="low">
        <p>未注册的手机号码验证后即完成注册，登录注册即代表您已同意<span>《《服务协议》》</span>和<span>《《隐私政策》》</span></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      login: false,
    };
  },
  methods: {
    submit() {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let pass = /^[a-zA-Z0-9]\w{8,17}$/;

      if (!reg.test(this.phone) || !pass.test(this.password)) {
        this.$toast("请输入正确手机号码与密码");
        return;
      } else {
        window.localStorage.setItem("token", 12345678);
        this.$toast("登录成功");
        this.$router.go(-1);
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  .header {
    margin: 42px 50px;
    position: relative;
    p {
      font-size: 24px;
      font-weight: 500;
    }
    h2 {
      font-size: 32px;
    }
    .back{
      width: 20px;
      height: 20px;
      position: absolute;
      top: -30px;
      left: -40px;
      img{
        width: 100%;
      }
    }
  }
  .main {
    margin: 0 40px;
    .item {
      background: #f7f7f7;
      margin-bottom: 16px;
      height: 48px;
      line-height: 48px;
      padding-left: 26px;
      border-radius: 20px;
      input {
        width: 100%;
        height: 100%;

        display: flex;
        flex: 1;
        border: none;
        outline: none;
      }
    }
    .sub {
      background: #ffef99;
      height: 48px;
      line-height: 48px;
      border-radius: 20px;
      text-align: center;
      color: #b4aa76;
      margin-bottom: 16px;
      &.con {
        background-image: linear-gradient(90deg, #fde55e 5%, #ffd800 100%);
        color: #444444;
      }
    }
    .tourist {
      text-align: center;
      color: #000;
      font-size: 14px;
      display: flex;
    justify-content: space-between;
    padding: 10px 0;
    }
    .low{
      margin-top: 50px;
      p{
        font-size: 12px;
        color: #999;
        line-height: 1.6;
        span{
          color: #ffab00;
        }
      }
    }
  }
}
</style>
